<template>
  <div class="connection-form">
    <div class="form-group">
      <label for="host">主机地址:</label>
      <input 
        id="host" 
        v-model="localConnection.host" 
        placeholder="例如：localhost 或 192.168.1.100" 
        class="form-control"
        @input="onConnectionChange"
      />
    </div>
    <div class="form-group">
      <label for="port">端口:</label>
      <input 
        id="port" 
        v-model="localConnection.port" 
        placeholder="默认：9200" 
        type="number" 
        class="form-control"
        @input="onConnectionChange"
      />
    </div>
    <div class="form-actions">
      <button 
        v-if="!isConnected" 
        @click="connect" 
        class="btn connect-btn"
        :disabled="connecting"
      >
        <span v-if="connecting">连接中...</span>
        <span v-else>连接</span>
      </button>
      <button 
        v-else 
        @click="disconnect" 
        class="btn disconnect-btn"
      >
        断开
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ConnectionForm',
  props: {
    connection: {
      type: Object,
      required: true
    },
    isConnected: {
      type: Boolean,
      required: true
    },
    connecting: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      localConnection: { ...this.connection }
    }
  },
  watch: {
    connection: {
      handler(newVal) {
        this.localConnection = { ...newVal };
      },
      deep: true
    }
  },
  methods: {
    onConnectionChange() {
      this.$emit('update-connection', this.localConnection);
    },
    connect() {
      this.$emit('connect', this.localConnection);
    },
    disconnect() {
      this.$emit('disconnect');
    }
  }
}
</script>